@import '@/styles/variable.scss';

.yun-village-page {
  .yun-village-navbar {
    background-color: $homeBgc;
    .nav-flag {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      color: #626262;
      .flag-item {
        font-size: .17rem;
        text-align: center;
        padding: 0 .05rem;
        &.active {
          font-weight: bold;
          color: #313131;
          position: relative;
          &::after {
            content: "";
            width: 100%;
            height: .05rem;
            border-radius: .1rem;
            position: absolute;
            left: 0;
            bottom: -.02rem;
            z-index: -1;
            background: linear-gradient(90deg, #ff0000de, #ff000059);
          }
        }
      }
    }
    .icon-zengjia {
      font-size: .3rem;
      color: #ff2e2e;
    }
  }

  .yun-village-content {
    position: relative;
    .yun-focus {
      .yun-circle {
        padding: .2rem .15rem .15rem;
        color: #333;
        font-size: .14rem;
        border-bottom: 1px solid #e7e7e7;
        .title {
          font-weight: bold;
          span {
            font-weight: normal;
            font-size: .1rem;
            color: grey;
          }
          margin-bottom: .15rem;
        }
        .go-circle {
          padding: .16rem;
          border-radius: .1rem;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          .icon-jiantou {
            font-size: .12rem;
          }
        }
      }
      .tip-img {
        width: 100%;
      }
    }
    .video-recommend {
      padding: .15rem .08rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
      .video-item {
        $gap: .08rem;
        border-radius: .1rem;
        background-color: #fff;
        // margin-bottom: $gap;
        overflow: hidden;
        .img-box {
          width: 100%;
          aspect-ratio: 1 / 1.25;
          background-color: #f7b2b2;
          position: relative;
          font-size: 0;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .duration {
            position: absolute;
            bottom: .08rem;
            right: .06rem;
            color: #e0e0e0;
            font-size: .12rem;
          }
        }
        .mv-info {
          padding: .1rem .08rem;
          .name {
            font-size: .14rem;
            color: #4a4a4a;
            line-height: 1.5;
          }
          .playinfo {
            margin-top: .06rem;
            color: #9e9e9e;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .1rem;
            .count {
              .icon-bofangsanjiaoxing {
                font-size: .12rem;
              }
            }
            .tag {
              max-width: 5em;
              line-height: 1.3;
            }
          }
        }
      }
    }
  }
}